<template>
  <!--  受影响设备 -->
  <div class="homePageCard">
    <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
      <div class="titleName">灾情实时统计</div>
      <a @click="goRouter">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
    </div>
    <div class="flexBetween" style="height: 87%">
      <div class="equipmentMain width50">
        <div class="titleStyle flex padding5-10">
          <div class="EmergencyList-sstj-icon"></div>
          <div>主网设备</div>
        </div>
        <div class="MainTopBox">
          <div class="mainBottom backgroundColor" style="height: 88%">
            <div class="flexBetween">
              <div></div>
              <div class="textColor flexAround white fontSize14 marginB5" style="width: 66%">
                <div></div>
                <div>停运/跳闸</div>
                <div>复电</div>
                <div>恢复率</div>
              </div>
            </div>
            <div class="flexBetween height40">
              <div class="white fontSize14 typeName fontWeight textColor">变电站</div>
              <div class="DataStatistics DataStatisticsssss flexAround">
                <div class="white">35kV</div>
                <div class="fontSize18 fontWeight colorF59A23 cursor" @click="handleDiolog('bdz','35kV')">{{StatisticsData.bdzTrip || 0}}</div>
                <div class="fontSize18 fontWeight color008DFF">{{StatisticsData.bdzRecover || 0}}</div>
                <div class="fontSize18 fontWeight white">{{StatisticsData.bdzRecoveryRate||'0%'}}</div>
              </div>
            </div>
            <div class="flexBetween height40">
              <div class="white fontSize14 typeName fontWeight textColor">输电线路</div>
              <div class="DataStatistics DataStatisticsssss flexAround">
                <div class="white">35kV</div>
                <div class="fontSize18 fontWeight colorF59A23 cursor" @click="handleDiolog('sdxl','35kV')">{{StatisticsData.sdxlTrip || 0}}</div>
                <div class="fontSize18 fontWeight color008DFF">{{StatisticsData.sdxlRecover || 0}}</div>
                <div class="fontSize18 fontWeight white">{{StatisticsData.sdxlRecoveryRate||"0%"}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="titleStyle flex padding0-10">
          <div class="EmergencyList-sstj-icon"></div>
          <div>配网设备</div>
        </div>
        <div class="MainBottomBox" style="height: 25%">
          <div class="mainBottom backgroundColor" style="height: 100%">
            <div class="flexBetween">
              <div></div>
              <div class="white fontSize14" style="width: 78%">
                <div class="flexAround white fontSize14 marginB5 textColor">
                  <div>停运/跳闸</div>
                  <div style="width: 15%">复电</div>
                  <div style="width: 22%">恢复率</div>
                </div>
              </div>
            </div>
            <div class="flexBetween" style="height: 70%">
              <div class="white fontSize14 typeName fontWeight textColor">10kV线路</div>
              <div class="DataStatistics DataStatisticsssss flexAround">
                <div class="fontSize18 fontWeight colorF59A23 cursor" @click="handleDiolog('pdxl','10kV')">{{StatisticsData.pwsbTrip || 0}}</div>
                <div class="fontSize18 fontWeight color008DFF">{{StatisticsData.pwsbRecover || 0}}</div>
                <div class="fontSize18 fontWeight white">{{StatisticsData.pwsbRecoveryRate||"0%"}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="equipmentMain height100 width50" style="padding:0 10px 0 0">
        <div class="titleStyle flex" style="padding:5px 0">
          <div class="EmergencyList-sstj-icon"></div>
          <div>用户及台区</div>
        </div>
        <div class="main backgroundColor">
          <div class="flexBetween">
            <div></div>
            <div class="textColor flexAround white fontSize14 marginB5 marginT5" style="width: 77%">
              <div>停运/跳闸</div>
              <div style="width: 22%;text-align: center;">复电</div>
              <div style="width: 24%;text-align: center;">恢复率</div>
            </div>
          </div>
          <div class="flexBetween height28 marginB10">
            <div class="textColor white fontSize14 typeName fontWeight">台区</div>
            <div class="third flexAround">
              <div class="fontSize18 fontWeight colorF59A23 cursor" @click="handleDiolog('tq','')">{{StatisticsData.tqTrip || 0}}</div>
              <div class="fontSize18 fontWeight color008DFF">{{StatisticsData.tqRecover || 0}}</div>
              <div class="fontSize18 fontWeight white">{{StatisticsData.tqRecoveryRate || "0%"}}</div>
            </div>
          </div>
          <div class="flexBetween height28 marginB10">
            <div class="textColor white fontSize14 typeName fontWeight">用户</div>
            <div class="third flexAround">
              <div class="fontSize18 fontWeight colorF59A23">{{StatisticsData.yhTrip || 0}}</div>
              <div class="fontSize18 fontWeight color008DFF">{{StatisticsData.yhRecover || 0}}</div>
              <div class="fontSize18 fontWeight white">{{StatisticsData.yhRecoveryRate || "0%"}}</div>
            </div>
          </div>
          <div class="flexBetween height28">
            <div class="textColor white fontSize14 typeName fontWeight" style="margin: 15px auto;">重要用户</div>
            <div class="third flexAround">
              <div class="fontSize18 fontWeight colorF59A23 cursor" @click="handleDiolog('zyyh','')">{{StatisticsData.zyyhTrip || 0}}</div>
              <div class="fontSize18 fontWeight color008DFF">{{StatisticsData.zyyhRecover || 0}}</div>
              <div class="fontSize18 fontWeight white">{{StatisticsData.zyyhRecoveryRate || "0%"}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 输电线路 -->
    <el-dialog title="受损设备查看" :visible.sync="dialogTableVisible" width="50%">
      <el-table :data="disasterTableData" :header-cell-style="{
          background: '#B1C8F9',
          color: '#000',
        }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停运输电线路名称" width="200">
        </el-table-column>
        <el-table-column prop="voltageClasses" align="center" label="电压等级" width="100">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="tripCause" align="left" label="停运/跳闸原因">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{disasterTableData.length}}条数据，共{{pageNum}}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 变电站 -->
    <el-dialog title="受损设备查看" :visible.sync="dialogTransformerSubstation" width="50%">
      <el-table :data="disasterTableData" :header-cell-style="{
          background: '#B1C8F9',
          color: '#000',
        }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停运变电站名称" width="200">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="voltageClasses" align="center" label="电压等级" width="100">
        </el-table-column>
        <el-table-column prop="tripCause" align="left" label="停运/跳闸原因">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{disasterTableData.length}}条数据，共{{pageNum}}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 配电 -->
    <el-dialog title="受损设备查看" :visible.sync="dialogDistribution" width="50%">
      <el-table :data="disasterTableData" :header-cell-style="{
          background: '#B1C8F9',
          color: '#000',
        }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停运配电线路名称" width="200">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="voltageClasses" align="center" label="电压等级" width="100">
        </el-table-column>
        <el-table-column prop="tripCause" align="left" label="停运/跳闸原因">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{disasterTableData.length}}条数据，共{{pageNum}}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 台区及用户 -->
    <el-dialog title="停运台区查看" :visible.sync="dialogShutdownStationArea" width="50%">
      <el-table :data="disasterTableData" :header-cell-style="{
          background: '#B1C8F9',
          color: '#000',
        }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停运台区名称" width="220">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="location" align="left" label="位置">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="220" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{disasterTableData.length}}条数据，共{{pageNum}}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 重要用户 -->
    <el-dialog title="停电重要用户查看" :visible.sync="dialogImportantUsers" width="50%">
      <el-table :data="disasterTableData" :header-cell-style="{
          background: '#B1C8F9',
          color: '#000',
        }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停电重要用户" width="220">
        </el-table-column>
        <el-table-column prop="grade" align="center" label="客户等级" width="100">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="location" align="left" label="位置">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="220" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{disasterTableData.length}}条数据，共{{pageNum}}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetResponse, GetStatistics } from "@/api/EmergencyDisposal/homepagecontent.js";
import { getHomePageInfoDetailList } from "@/api/EmergencyDisposal/zqbs.js";
export default {
  name: "DisasterStatistics",
  components: {},
  props: {
    emergencyEventIds: {
      type: String,
      default: ""
    },
    emergencyEventIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      disasterTableData: [],
      emergencyId: "",
      dialogTableVisible: false, // 输电线路
      dialogTransformerSubstation: false, // 变电站
      dialogDistribution: false, // 配电
      dialogShutdownStationArea: false, //  台区及用户
      dialogImportantUsers: false, // 重要用户
      pageNum: 1,
      total: 0,
      StatisticsData: {},
      typeobj: ""
    };
  },
  watch: {
    emergencyEventIds(val, oldVal) {
      if (val) {
        this.GetStatisticsData(val);
        this.emergencyId = val;
      }
    }
  },
  mounted() {
    this.GetResponses();
  },
  methods: {
    async GetResponses() { // 命令单
      const res = await GetResponse();
      if (res) {
        this.GetStatisticsData(res[0].emergencyEventIds); // 默认显示第一条命令单的数据
        this.emergencyId = res[0].emergencyEventIds;
      }
    },
    async GetStatisticsData(emergencyEventIds) { // 命令单
      const res = await GetStatistics({ eventIds: emergencyEventIds });
      this.StatisticsData = res;
      // const obj = {
      //   bdz35KvTrip: 4,
      //   bdz35KvRecover: 3,
      //   sdxl35KvTrip: 5,
      //   sdxl35KvRecover: 3,
      //   pdxl10KvTrip: 22,
      //   pdxl10KvRecover: 18,
      //   tqTrip: 1080,
      //   tqRecover: 1000,
      //   tqRater: "98%",
      //   ptyhTrip: 68310,
      //   ptyhRecover: 57769,
      //   ptyhRater: "84.57%",
      //   zyyhTrip: 126,
      //   zyyhRecover: 100,
      //   zyyhRater: "79%"
      // };
      // const obj2 = {
      //   bdz35KvTrip: 12,
      //   bdz35KvRecover: 10,
      //   sdxl35KvTrip: 15,
      //   sdxl35KvRecover: 12,
      //   pdxl10KvTrip: 31,
      //   pdxl10KvRecover: 25,
      //   tqTrip: 1338,
      //   tqRecover: 1295,
      //   tqRater: "97%",
      //   ptyhTrip: 72100,
      //   ptyhRecover: 65060,
      //   ptyhRater: "90",
      //   zyyhTrip: 6,
      //   zyyhRecover: 4,
      //   zyyhRater: "66"
      // };
      // if (this.emergencyEventIndex === 0) {
      //   this.StatisticsData = obj;
      // } else {
      //   this.StatisticsData = obj2;
      // }
    },
    goRouter(name) {
      this.$router.push({
        name: "DisasterInformationStatistics"
      });
    },
    // 输电线路 35
    handleDiolog(specialtyCode, voltageClasses) {
      this.typeobj = {
        specialtyCode,
        voltageClasses
      };
      if (specialtyCode === "sdxl") {
        this.dialogTableVisible = true;
      } else if (specialtyCode === "bdz") {
        this.dialogTransformerSubstation = true;
      } else if (specialtyCode === "pdxl") {
        this.dialogDistribution = true;
      } else if (specialtyCode === "tq") {
        this.dialogShutdownStationArea = true;
      } else if (specialtyCode === "zyyh") {
        this.dialogImportantUsers = true;
      }
      this.getHomePageInfoDetailLists(specialtyCode, voltageClasses);
    },
    async getHomePageInfoDetailLists(specialtyCode, voltageClasses) {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: specialtyCode, // 线路编码
        emergencyId: this.emergencyId, // 应急事件id
        voltageClasses: voltageClasses // 电压等级
      };
      const res = await getHomePageInfoDetailList(parmas);
      this.total = res.total;
      this.tableData111 = res.data;
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      const { specialtyCode, voltageClasses } = this.typeobj;
      this.getHomePageInfoDetailLists(specialtyCode, voltageClasses);
    }
  }
};
</script>

<style scoped lang="less">
.homePageCard{
  height: 90%;
}
.main {
  padding: 0px 10px 0 0;
  height: 83%;
  box-sizing: border-box;
}
.MainTopBox {
  height: 46.2%;
}
.MainBottomBox {
  flex: 1;
}
.EmergencyList-sstj-icon {
  width: 5px;
  height: 16px;
  background: #236dfe;
  border-radius: 4px;
  margin: auto 8px auto 0;
}
.DataStatistics.DataStatisticsssss {
  height: 80%;
  div {
    width: 33%;
    text-align: center;
    margin: auto 0;
  }
}
.third {
  width: 75%;
  height: 60%;
  border-radius: 5px;
  background-color: rgba(2, 167, 240, 0.1);
  border: 1px solid rgba(2, 167, 240, 0.4);
  div {
    width: 33%;
    text-align: center;
    margin: auto 0;
  }
}
.textColor {
  color: rgba(255, 255, 255, 1);
}
// 弹窗头部背景颜色
:deep(.el-dialog__header) {
  background: #5077ff;
}
// 弹窗头部文字颜色
:deep(.el-dialog__title) {
  color: #fff;
}
:deep(.el-collapse-item__header) {
  border-bottom: none;
}
:deep(.el-icon-close) {
  color: #fff;
  font-size: 30px;
}
// 公共弹窗样式  开始
.information_Sources {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  .information_Sources_title {
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom: 3px;
  }
}

.information_Sources_content {
  margin-top: 10px;
}

// 公共弹窗样式   结束
// 分页样式
.InformationList-table-pag {
  float: right;
  position: absolute;
  right: 1%;
  bottom: 2%;
  > div {
    line-height: 32px;
  }
}
.btn_list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cursor {
  cursor: pointer;
}
</style>
